<%-- 
    Document   : feature_jobs
    Created on : Oct 13, 2011, 1:22:27 PM
    Author     : mr5rule
--%>

    <%--start slide--%>

    <h1 class="feture-job">Top Majikan!</h1>
                    <div id="main" class="container">

                        <div class="main_image">
                            <%--leftside slide--%>
                            <img src="${pageContext.request.contextPath}/pub/images/featurejob/f1.jpg" alt="" />
                            <div class="desc">
                                <a href="#" class="collapse">Close Me!</a>
                                <div class="block">
                                    <h2>Theta Edge Berhad Anak Emas Tabung Haji</h2>
                                    <p>
                                            <span>Tarikh Kekosongan Terkini : 12/10/2011</span>
                                            <br/>
                                            <span>Jumlah Kekosongan Ditawarkan : 5</span>
                                            <br/>
                                            <br/>
                                    Theta Edge Berhad adalah anak syarikat Tabung Haji. Menawar kekosangan kerja kepada yang berkelayakan. </p>
                                </div>
                            </div>

                        </div>
                        <%--right side image--%>
                        <div class="image_thumb">
                            <ul>
                                <li>
                                    <a href="${pageContext.request.contextPath}/pub/images/featurejob/f1.jpg"></a>
                                    <div class="block">
                                        <h2>Theta Edge Berhad Anak Emas Tabung Haji</h2>
                                        <p>
                                            <span>Tarikh Kekosongan Terkini : 12/10/2011</span>
                                            <br/>
                                            <span>Jumlah Kekosongan Ditawarkan : 5</span>
                                            <br/>
                                            <br/>
                                    Theta Edge Berhad adalah anak syarikat Tabung Haji. Menawar kekosangan kerja kepada yang berkelayakan. </p>
                                    </div>
                                </li>
                                <li>
                                    <a href="${pageContext.request.contextPath}/pub/images/featurejob/f2.jpg"></a>
                                    <div class="block">
                                        <h2>Organized Food Fight</h2>

                                        <%--<small>04/11/09</small>--%>
                                        <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et. Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>

                                    </div>
                                </li>
                                <li>
                                    
                                    <a href="${pageContext.request.contextPath}/pub/images/featurejob/f3.jpg"></a>

                                    <div class="block">
                                        <h2>Endangered Species</h2>
                                        <%--<small>04/12/09</small>--%>
                                        <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://store.glennz.com/ensp.html" target="_blank">Artwork By Glenn Jones</a></p>
                                    </div>
                                </li>
                                <li>

                                   <a href="${pageContext.request.contextPath}/pub/images/featurejob/f4.jpg"></a>
                                    <div class="block">
                                        <h2>Evolution</h2>
                                        <%--<small>04/13/09</small>--%>
                                        <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et. Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://store.glennz.com/evolution.html" target="_blank">Artwork By Glenn Jones</a></p>
                                    </div>

                                </li>
                                <li>
                                   <a href="${pageContext.request.contextPath}/pub/images/featurejob/f5.jpg"></a>
                                    <div class="block">
                                        <h2>Puzzled Putter</h2>
                                        <%--<small>04/14/09</small>--%>
                                        <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et. <br /><a href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By Glenn Jones</a></p>

                                    </div>
                                </li>

                            </ul>
                        </div>
                    </div> <%--end slide--%>





                      <script type="text/javascript">
            $(document).ready(function() {

                //Show Banner
                $(".main_image .desc").show(); //Show Banner
                $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

                //Click and Hover events for thumbnail list
                $(".image_thumb ul li:first").addClass('active');
                $(".image_thumb ul li").click(function(){
                    //Set Variables
                    var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
                    var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
                    var imgDesc = $(this).find('.block').html(); 	//Get HTML of block
                    var imgDescHeight = $(".main_image").find('.block').height();	//Calculate height of block

                    if ($(this).is(".active")) {  //If it's already active, then...
                        return false; // Don't click through
                    } else {
                        //Animate the Teaser
                        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
                            $(".main_image .block").html(imgDesc).animate({ opacity: 0.7,	marginBottom: "0" }, 250 );
                            $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
                        });
                    }

                    $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
                    $(this).addClass('active');  //add class of 'active' on this list only
                    return false;

                }) .hover(function(){
                    $(this).addClass('hover');
                }, function() {
                    $(this).removeClass('hover');
                });

                //Toggle Teaser
                $("a.collapse").click(function(){
                    $(".main_image .block").slideToggle();
                    $("a.collapse").toggleClass("show");
                });

            });//Close Function
        </script>
